<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .checked{position: relative;width: 30px;height: 20px;display: inline-block;}
    .checked span{position: absolute;width: 10px;height:20px;border-radius: 5px 5px 0 0;}

    .checked[data-checked] span{background: #ccc;}
    .checked[data-checked="checked"] span{background: red;}

    .checked span:nth-child(1){transform: translate(8px,0) rotate(45deg);}
    .checked span:nth-child(2){transform: rotate(-45deg);}
  </style>
</head>
<body>
  <form>
    你的爱好是：

    <div class="checked" data-checked="" data-value="篮球">
      <span></span>
      <span></span>
    </div>篮球

    <div class="checked" data-checked="" data-value="唱歌">
      <span></span>
      <span></span>
    </div>唱歌

    <div class="checked" data-checked="" data-value="跳舞">
      <span></span>
      <span></span>
    </div>跳舞

    <br>

    <input type="button" value="确认" class="yes">
  </form>
</body>
<script>
  // 使用div+css+js模拟：多个复选框的选中了哪些项的效果
  var checked = document.querySelectorAll(".checked");
  for(var i=0;i<checked.length;i++){
    checkBox( checked[i] );
  }
  
  var yes = document.querySelector(".yes");
  yes.onclick = function(){
    // 利用count功能，统计指定复选框中哪些项被选中了
    console.log( count( checked ) );
  }

  // 用来统计传入的复选框中被选中了的项
  function count(eles){
    // 准备存储被选中了的项
    var arr = [];
    // 遍历传入的复选框
    for(var i=0;i<eles.length;i++){
      // 判断每个复选框是否有被选中的标志
      if(eles[i].dataset.checked === "checked"){
        // 将当前复选框的值，存入数组
        arr.push( eles[i].dataset.value )
      }
    }
    // 返回最终结果
    return arr;
  }




  // 单个复选框的选中或取消效果
  function checkBox( ele ){
    ele.state = false;
    ele.onclick = function(){
      if(ele.state){
        ele.dataset.checked = "";
        ele.state = false;
      }else{
        ele.dataset.checked = "checked";
        ele.state = true;
      }
    }
  }

  

  
</script>
</html>